<template>
    <view :class="$style.tabBar">
        <template v-for="(item, index) in list">
            <view :class="[$style.tab, index == currnetIndex ? $style.selected : '']" @click="nav(index)">
                <view :class="$style.wrap">
                    <view v-if="index == 3 && globalStore.unreadMsgCount > 0" :class="$style.bage"><uni-badge size="small" :max-num="99" :text="globalStore.unreadMsgCount"></uni-badge></view>
                    <image :class="$style.icon" mode="widthFix" :src="index == currnetIndex ? item.selectedIcon : item.icon" />
                    <view :class="$style.name">{{ item.title }}</view>
                </view>
            </view>
        </template>
    </view>
</template>

<script lang="ts" setup>
    import Index from "@/static/tab-bar/home.png"
    import IndexSelected from "@/static/tab-bar/home-active.png"
    import Task from "@/static/tab-bar/task.png"
    import TaskSelected from "@/static/tab-bar/task-active.png"
    import App from "@/static/tab-bar/app.png"
    import AppSelected from "@/static/tab-bar/app-active.png"
    import Msg from "@/static/tab-bar/msg.png"
    import MsgSelected from "@/static/tab-bar/msg-active.png"
    import Me from "@/static/tab-bar/user.png"
    import MeSelected from "@/static/tab-bar/user-active.png"
    import { ref } from "vue"
import { useGlobalStore } from "@/stores"


    const globalStore = useGlobalStore()

    globalStore.unreadMsgCount = 10


    const list = [
        {
            title : '首页',
            url : '/pages/index/index',
            icon : Index,
            selectedIcon : IndexSelected,
        },
        {
            title : '待办中心',
            url : '/pages/task/index',
            icon : Task,
            selectedIcon : TaskSelected,
        },
        {
            title : '服务中心',
            url : '/pages/apps/index',
            icon : App,
            selectedIcon : AppSelected,
        },
        {
            title : '消息',
            url : '/pages/message/index',
            icon : Msg,
            selectedIcon : MsgSelected,
        },
        {
            title : '我的',
            url : '/pages/me/index',
            icon : Me,
            selectedIcon : MeSelected,
        },
    ]

    const page = getCurrentPages()[0]
    const currnetIndex = ref(0)

    
    currnetIndex.value = list.findIndex(item => item.url.indexOf(page.route) == 1)

    function nav(index:number) {
        if(currnetIndex.value != index) {
            currnetIndex.value = index
            uni.redirectTo({
                url : list[index].url
            })
        }
    }

</script>

<style lang="scss" module>
    .tabBar{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: $tab-bar-height;
        z-index: 5;
        border-top: 1rpx solid #E7E7E7;padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        
        

        .tab{
            height: 80rpx;
            width: 130rpx;
            border-radius: 48rpx;
            position: relative;

            

            display: flex;
            align-items: center;
            justify-content: center;

            .icon{
                display: block;
                width: 40rpx;
                margin: auto;
            }

            .name{
                font-size: 20rpx;
                text-align: center;
            }

            &.selected{
                background-color: rgba($color: #0052D9, $alpha: 0.05);
                .name{
                    color: #0052D9;
                }
            }
        }

        .wrap{
            position: relative;
            .bage{
                z-index: 10;
                position: absolute;
                right: 0;
                top: 0;
                transform: translate(30rpx, -20rpx);
            }
        }
    }
</style>